<template>
  <div>
    <div class="head_top">
      <el-col :span="6">
        <el-col :span="3"> &nbsp; </el-col>
        <el-col :span="3">
          <img src="../assets/img/home/logo.png" height="26" width="242" />
        </el-col>
      </el-col>
      <el-col :span="12">
        <el-col :span="3"> 首页 </el-col>
        <el-col :span="3"> 资源中心 </el-col>
        <el-col :span="3"> 解决方案 </el-col>
        <el-col :span="3"> 帮助与支持 </el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="3"> 登录 </el-col>
        <el-col :span="3"> 注册 </el-col>
      </el-col>
    </div>
    <div class="block">
      <el-carousel height="550px" style="width: 100%" class="swper_body">
        <el-carousel-item v-for="item in swpList" :key="item">
          <img :src="item" alt="" class="carousel_img" />
        </el-carousel-item>
        <div class="swper_bottom">
          <el-col :span="5"> &nbsp; </el-col>
          <el-col :span="19">
            <el-col :span="1" class="">
              <img
                src="../assets/img/home/icon_gonggao.png"
                height="34"
                width="34"
              />
            </el-col>
            <el-col :span="5" class="el_col">
              <span>银联商务智意园区体温检测方案</span>
            </el-col>
            <el-col :span="5" class="el_col">
              <span>首届银联商务开放平台移动</span>
            </el-col>
            <el-col :span="5" class="el_col">
              <span>银联商务开放平台移动应用竞赛</span>
            </el-col>
            <el-col :span="3">
              <div class="swper_button" style="margin-top: 3px">查看更多</div>
            </el-col>
          </el-col>
        </div>
      </el-carousel>
    </div>
    <div class="settled_title">联盟入驻</div>
    <div class="settled_module">
      <div v-for="(item, index) in classifyList" :key="index" @click="formDetail(index)">
        <div class="settled_classify">
          <div>
            <img
              src="../assets/img/home/icon_ruzhu.png"
              height="52"
              width="52"
            />
          </div>
          <div class="settled_name">{{ item.title }}</div>
          <div class="settled_content lineshow3">
            以物流、支付为导向，以数据为驱动,软硬件结
            以物流、支付为导向，以数据为驱动,软硬件结
            以物流、支付为导向，以数据为驱动,软硬件结
            台，实现物流、信息流、资金流的统一管理。
          </div>
          <div class="settled_submit">申请入驻</div>
        </div>
      </div>
    </div>
    <div class="classify_title">
      <div class="">新闻资讯</div>
      <div class="">人才招聘</div>
    </div>
    <div class="personnel_classify">
      <div class="personnel_dy">
        <div
          v-for="(item, index) in personnelList"
          :key="index"
          class="personnel_body"
        >
          <div class="align-center" style="width: 100%">
            <img
              src="@/assets/img/home/xinwenicon.png"
              alt=""
              height="20px"
              width="20px"
              style="margin-right: 5px"
            />
            <div
              style="width: 25rem"
              class="one_overflow"
              @click="consultingText(item)"
            >
              {{ item.title }}
            </div>
          </div>
          <img
            src="../assets/img/home/icon-y.png"
            alt=""
            height="20"
            width="20"
          />
        </div>
      </div>

      <div class="personnel_dy">
        <div
          v-for="(item, index) in personnelList"
          :key="index"
          class="personnel_body"
        >
          <div class="align-center" style="width: 100%">
            <img
              src="@/assets/img/home/zhaopin.png"
              alt=""
              height="20px"
              width="20px"
              style="margin-right: 5px"

            />

            <div style="width: 25rem" class="one_overflow">
              {{ item.title }}
            </div>
          </div>
          <img
            src="../assets/img/home/icon-y.png"
            alt=""
            height="20"
            width="20"
          />
        </div>
      </div>
    </div>

    <div class="xinwen">
      <img src="../assets/img/home/logo-list.png" alt="" />
    </div>
    <div class="home_bottom">
      <div class="bottom_head" style="padding-bottom: 30px">
        <div style="font-size: 13px">
          <img src="../assets/img/home/logo.png" height="26" width="242" />
          <div>地址：山东省济南市历下区海尔时代大厦</div>
          <div>电话：021-2312312（工作日）</div>
          <div>邮编：232657</div>
        </div>
        <div
          style="
            height: 150px;
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
          "
        ></div>
        <div v-for="item in classifyBottomList" :key="item.id">
          <div style="margin-bottom: 10px; font-size: 20px; color: white">
            {{ item.title }}
          </div>
          <div
            v-for="(item01, index01) in item.list"
            :key="index01"
            style="font-size: 13px"
          >
            {{ item01.title }}
          </div>
        </div>
      </div>
      <div class="bottom_copyright">
        <div>银联商务</div>
        <div>版权所有</div>
        <div>沪ICP备05003469号</div>
        <div class="umsbeianbgs">
          <img src="@/assets/img/home/umsbeianbgs.png" alt="" />
          <div style="margin-left: 6px">沪公网安备3101 1502007281号</div>
        </div>
        <div>增值电信业务经营许可证:沪B2-20140009</div>
      </div>
    </div>
  </div>
</template>

<script>
var util = require("@/assets/js/util.js");
var time = util.formatTime(new Date());
export default {
  data() {
    return {
      times: time,
      swpList: [
        require("@/assets/img/home/l6.jpg"),
        // require("@/assets/img/home/l5.jpg"),
        require("@/assets/img/home/l7.jpg"),
      ],
      // 入驻分类
      classifyList: [
        { title: "商家入驻",},
        { title: "医院入驻",},
        { title: "药店入驻",},
      ],
      //人才招聘
      personnelList: [
        { title: "重4T!不阜理留当其7票-”日票766" },
        { title: "千万人涌入教资考试教师铁饭碗香不香?" },
        { title: "欧冠本周最佳球员候选:莱万PK锋霸梅罗落选" },
        { title: "明星撞脸卡通人物，在二次元里找寻另一个自己?" },
        { title: "制9套IC.上的博主穿搭，效果绝了" },
      ],
      classifyBottomList: [
        {
          title: "相关链接",
          id: 1,
          list: [
            { title: "银联商务官网", },
            { title: "服务协议", },
            { title: "支付承诺", },
            { title: "加入我们", },
          ],
        },
        {
          title: "帮助与支持",
          id: 2,
          list: [
            {title: "平台介绍", },
            { title: "新手指南", },
            { title: "常见问题", },
            { title: "加入我们", },
          ],
        },
        {
          title: "客服帮助",
          id: 3,
          list: [
            { title: "在线建议", },
            { title: "邮箱: uop@chin",},
            { title: "电话: 95534",},
          ],
        },
      ],
    };
  },

  methods: {
    //系统时间
    time() {},
    //富文本跳转
    consultingText(event) {
      console.log(event);
      this.$router.push("/consultingText");
//    this.$router.push({path:'/testDemo',query:{setid:123456}});
//    this.$router.push({name:'testDemo',params:{setid:111222}});
    },
    //表单验证跳转
    formDetail(event){
      if(event ==0){

        return
      }
      if(event ==1){
        this.$router.push("/form/doctor");
        return;
      }
    }
  },
  computed: {
    week() {
      var str = "";
      var week = new Date().getDay();
      if (week == 0) {
        str = "星期日";
      } else if (week == 1) {
        str = "星期一";
      } else if (week == 2) {
        str = "星期二";
      } else if (week == 3) {
        str = "星期三";
      } else if (week == 4) {
        str = "星期四";
      } else if (week == 5) {
        str = "星期五";
      } else if (week == 6) {
        str = "星期六";
      }
      return str;
    },
  },
};
</script>


<style lang="scss">
::v-deep .el-carousel__container {
  padding: 0;
}
//头部时间区域
.head_time {
  display: flex;
  align-content: center;
  color: #123e88;
  .time {
    margin-left: 10px;
  }
  img {
    height: 1rem;
    width: 1rem;
  }
}

//轮播图
.carousel_img {
  height: 550px;
  width: 100%;
  background-color: #eeeeee;
}
.swper_body {
  height: 550px;
  width: 100%;
  background-color: #eeeeee;
  position: relative;
}
//轮播底部
.swper_bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 999;
  color: white;
}
.el_col :hover {
  background-color: rgba(0, 0, 0, 0.4);
}
//查看更多
.swper_button {
  border: 1px solid #fff;
  color: white;
  border-radius: 99px;
  display: flex;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  width: 100px;
  justify-content: center;
  align-content: center;
}
.flex {
  display: flex;
}
.align-center {
  display: flex;
  align-content: center;
}

.one_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} /* 一行隐藏 */
//头部
.head_top {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 9999;
  color: white;
}
div {
  //border: 1px solid red;
}
.el_col {
  line-height: 40px;
}

//入驻
.settled_title {
  text-align: center;
  padding: 30px;
  color: #535865;
  font-size: 38px;
}

.settled_module {
  display: flex;
  align-content: center;
  justify-content: space-around;
  padding-left: 20rem;
  padding-right: 20rem;
}
.settled_classify:hover {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
//入驻分类
.settled_classify {
  border: 1px solid #bbbfc1;
  border-radius: 2px;
  width: 20rem;
  height: 15rem;
  text-align: center;
  padding-top: 2rem;
  position: relative;
}
//入驻类目名
.settled_name {
  color: #535865;
  font-size: 1.2rem;
  font-family: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}
.settled_content {
  color: #535865;
  font-size: 10px;
  word-break: break-all;
  padding-left: 10px;
  padding-right: 10px;
}
.settled_submit {
  position: absolute;
  bottom: 0;
  padding: 15px;
  text-align: center;
  left: 0;
  right: 0;
  border-top: 1px solid #eeeeee;
  color: #535865;
}
.settled_submit :hover {
  color: #000 !important;
}
.lineshow3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

//人才招聘
.personnel_classify {
  display: flex;
  justify-content: space-between;
  margin-left: 20rem;
  margin-right: 20rem;
}
.personnel_dy {
  padding-bottom: 50px;
  width:45%;
}
.classify_title {
  font-size: 38px;
  color: #535865;
  display: flex;
  justify-content: space-between;
  padding-left: 20rem;
  padding-right: 20rem;
  div {
    width: 45%;
    padding-top: 3rem;
    padding-bottom: 1rem;
    text-align: center;
  }
}
.personnel_body {
  padding: 20px;
  border-bottom: 1px solid #eeeeee;
  color: #535865;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

//首页底部
.home_bottom {
  background-color: #1f2550;
  padding-left: 20rem;
  padding-right: 20rem;
  padding-top: 2rem;
  color: #c9cad4;
  .bottom_head {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
  }
  .umsbeianbgs {
    display: flex;
    align-content: center;
  }
  .bottom_copyright {
    font-size: 14px;
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    padding: 15px;
    align-content: center;
    justify-content: space-between;
  }
}

.xinwen {
  background-color: #f4f7ff;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
</style>























